<template>
  <view :class="classes">
    <text class="axq-form-item__label" :style="labelStyleStr">{{ label }}</text>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'AxqFormItem',
  components: {},
  mixins: [],
  props: {
    prop: String,
    label: String,
    labelWidth: String,
    required: Boolean
  },
  inject: [ 'axqForm' ],
  data () {
    return {
    }
  },
  computed: {
    classes () {
      let res = 'axq-form-item'
      let isInline = this.get(this.axqForm,'inline')
      if (isInline) {
        res += ' axq-form-item--inline'
      }
      let labelAlign = this.get(this.axqForm,'labelAlign')
      if (labelAlign) {
        res += ` axq-form-item--align-${labelAlign}`
      }
      if (this.required) res+= ' axq-form-item--required'

      let styleType = this.get(this.axqForm,'styleType')
      if (styleType) {
        res += ` axq-form-item--${styleType}`
      }
      return res
    },
    labelStyleStr () {
      let res = ''

      let formLabelW= this.get(this.axqForm,'labelWidth')
      if (formLabelW || this.labelWidth){
        let w = this.labelWidth || this.axqForm.labelWidth || ''
        if (w) {
          let number = parseFloat(w)
          if (!isNaN(number))
            res+=`width: ${w};`
        }
      }
      return res
    }
  },
  created () {
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.axq-form{
  &-item{
    position: relative;
    border-bottom: 2rpx solid #8a8887;
    &--required{
      .axq-form-item__label::before{
        content: '*';
        position: absolute;
        top: 50%;
        left: -.5em;
        color: #FF0000;
        transform: translateY(-50%);
      }
    }
    &__label{
      position: relative;
      align-self: flex-start;
      display: block;
      padding-right: 60rpx;
      font-size: 34rpx;
      font-weight: bold;
      color: #333333;
      line-height: 90rpx;

    }
    &--inline{
      .flexLayout();
    }
    &--align-between{
      .axq-form-item__label{
        text-align: justify;
        text-align-last: justify;
      }
    }

    &--transparent-bg{
      .axq-form-item{
        &__label{
          font-size: 30rpx;
          color: #666;
        }
      }
    }
  }
}
.axq-form-item{
  &:not(:first-of-type){
    margin-top: 37rpx;
  }
}
</style>